<template>
  <div id="app" :style="{
    '--themeColor': form.themeColor.hex,
    '--shadowColor': `rgba(${form.themeColor.rgba.r},${form.themeColor.rgba.g},${form.themeColor.rgba.b},0.1)`,
  }">
    <floatButton ref="floatBtn" :form="form">
      <menuPart @closeMenuAndFloating="closeMenuAndFloating"></menuPart>
    </floatButton>
  </div>
</template>
<script>
import menuPart from './menuPart.vue';
import floatButton from './floatButton.vue';

export default {
  name: 'App',
  components: {
    floatButton,
    menuPart,
  },
  data() {
    return {
      form: {
        themeColor: {
          hsl: { h: 200, s: 0, l: 0, a: 1 },
          hex: '#000000',
          hex8: '#000000FF',
          rgba: { r: 0, g: 0, b: 0, a: 1 },
          hsv: { h: 200, s: 0, v: 0, a: 1 },
          oldHue: 200,
          source: 'hex',
          a: 1,
        },
        fontSize: 28,
      },
    };
  },
  methods: {
    closeMenuAndFloating() {
      this.$refs.floatBtn.closeMenuAndFloating();
    },
  },
};
</script>